<template>
  <BasicModal @register="registerModal" destroyOnClose title="查看" :width="1000">
    <JmReport chartId="893003502196539392" :params="reportParams" style="height: 500px" />
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import JmReport from '/@/components/JmReport/index.vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';

  const props = defineProps({
    fData: { type: Object, default: () => {} },
  });

  const emit = defineEmits(['register', 'ok']);
  const reportParams = ref({ id: '', cartegory: '', position: '', useState: '' });
  watch(
    () => props.fData,
    () => {
      reportParams.value.id = props.fData.id;
      reportParams.value.cartegory = props.fData.categoryName;
    },
    { deep: true, immediate: true }
  );

  const [registerModal] = useModalInner(async (data) => {});
</script>

<style lang="less" scoped>
  .antd-modal-form {
    min-height: 500px !important;
    overflow-y: auto;
    padding: 24px 24px 24px 24px;
  }
  .info-title {
    font-size: 15px;
    font-weight: 600;
  }
</style>
